<template>
  <Panel title="收货信息">
    <div class="place-info">
      <div class="write-area">
        <div class="row">
          <div class="title">所在地区：</div>
          <div class="area">
            <select>
              <option value="">请选择</option>
              <option value="">北京市</option>
            </select>
            <select>
              <option value="">请选择</option>
              <option value="">北京市</option>
            </select>
            <select>
              <option value="">请选择</option>
              <option value="">北京市</option>
            </select>
          </div>
        </div>
        <div class="row">
          <div class="title">详细地址：</div>
          <div class="area">
            <textarea placeholder="详细地址，街道、门牌号等"></textarea>
          </div>
        </div>
        <div class="row">
          <div class="half">
            <div class="title">收货人：</div>
            <input type="text">
          </div>
          <div class="half">
            <div class="title">手机号码：</div>
            <input type="text">
          </div>
        </div>
      </div>
      <div class="btn-group">
        <CheckBox :checked="isDefaultPlace" :center="true" @onChange="setDefaultPlaceHandler($event)">设为默认</CheckBox>
        <div class="row">
          <div class="btn btn-save">保存地址</div>
          <div class="btn btn-cancel">取消</div>
        </div>
      </div>
    </div>
  </Panel>
</template>

<script>
import Panel from '@/components/Panel'
import CheckBox from '@/components/common/CheckBox'

export default {
  data () {
    return {
      isDefaultPlace: false
    }
  },

  methods: {
    /**
     * 设置默认地址
     * @param { Boolean } checked 选中状态
     */
    setDefaultPlaceHandler (checked) {
      this.isDefaultPlace = checked
    }
  },

  components: {
    Panel,
    CheckBox
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.place-info {
  padding: 30px;
  display: flex;
  .write-area {
    width: 620px;
    .row {
      display: flex;
      margin-top: 20px;
      .title {
        font-size: 14px;
        width: 82px;
        padding-right: 10px;
        white-space: nowrap;
        line-height: 28px;
        text-align: right;
      }
      .area {
        flex: 1;
        select {
          border: 1px solid @border-grey;
          color: @font-color;
          font-size: 14px;
          outline: none;
          width: 170px;
          height: 28px;
          margin-left: 10px;
          &:first-child {
            margin-left: 0px;
          }
        }
        textarea {
          background-color: #fff;
          border: 1px solid @border-grey;
          border-radius: 2px;
          color: @font-color;
          height: 70px;
          padding: 6px 10px;
          width: 536px;
          outline: none;
        }
      }
      .half {
        display: flex;
        flex: 1;
        .title {
          line-height: 34px;
        }
        input {
          border: 1px solid @border-grey;
          color: @font-color;
          font-size: 14px;
          width: 200px;
          height: 34px;
          outline: none;
          padding: 0px 8px;
        }
      }
    }
  }
  .btn-group {
    justify-content: center;
    border-left: 1px dashed @line-color-light1;
    display: flex;
    flex-direction: column;
    margin-left: 40px;
    margin-top: 20px;
    padding-left: 50px;
    width: 360px;
    .row {
      margin-top: 24px;
      .btn {
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        width: 144px;
        height: 42px;
        line-height: 40px;
        font-size: 16px;
        text-align: center;
        &.btn-save {
          background-color: #b4a078;
          border: 1px solid #b4a078;
          color: #fff;
        }
        &.btn-cancel {
          background-color: #f5f3ef;
          border: 1px solid #b4a078;
          color: #b4a078;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
